<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/JoynBackground.css" type="text/css" media="screen"/>
    <noscript><link rel="stylesheet" href="css/noscript.css" /></noscript>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/JoynBackground.js"></script>
    <script>
        $(document).ready(function(){
            JoynBackground(2,5000); //场景动画类型和时间
            /* 场景动画类型：【1】拉近【2】拉远【3】幻灯片显示 */
        })
    </script>
    <style>
        #Content{ background-image: url(images/del.png); text-align: center; margin: 300px auto; padding: 20px; width: 60%; border-radius: 30px; }
    </style>
</head>

<body>
<div id="Content">
    <h2>
        Welcome to MyPetStore
    </h2>
    <p><a href="/catalog/view">Enter the Store</a> </p>
    <p><sub>Copyright Central South University</sub></p>
</div>
<!-- 背景 -->
<div id="JoynBackground">
    <img src="images/1.jpg" name="1"/>
    <img src="images/2.jpg" name="2"/>
    <img src="images/3.jpg" name="3"/>
    <img src="images/4.jpg" name="4"/>
    <img src="images/5.jpg" name="5"/>
</div>
<!-- 背景 -->
</body>
</html>